<template>
  <div class="insp">
    <div class="insp-header">
      <div class="flexBetween">
        <div class="flex insp-header-left">
          <el-input placeholder="请输入病害名称" clearable v-model="diseaseName" size="small" style="width: 150px" class="mRight10"> </el-input>
          <el-button class="btn" type="primary" size="small" @click="queryForPage(1)">查询</el-button>
        </div>
        <div>
          <!-- <el-button icon="el-icon-right" size="small" type="success" @click="handleDownLoad">
            导出养护单
          </el-button> -->
        </div>
      </div>
    </div>

    <div class="insp-content">
      <div class="insp-table">
        <el-table
                :data="tableData"
                stripe
                :header-cell-style="{
            background: '#8595B9',
            color: '#fff',
            height: '44px',
          }"
                max-height="660px"
                @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column prop="taskName" label="养护单" show-overflow-tooltip></el-table-column>
          <el-table-column prop="diseaseName" label="病害名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="bridgeName" label="桥梁名称" show-overflow-tooltip></el-table-column>
          <el-table-column prop="diseaseLocationStr" label="病害位置" show-overflow-tooltip></el-table-column>
          <el-table-column prop="defectRecord" label="缺损记录" show-overflow-tooltip></el-table-column>
          <el-table-column prop="feedbackDescribe" label="养护描述" show-overflow-tooltip></el-table-column>
          <el-table-column property="state" label="处理状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <label :class="['insp-table-label', statusClass(scope.row.status)]">{{ statusText(scope.row.status) }}</label>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-tooltip content="详情">
                <el-button type="text" icon="el-icon-document" @click="handelDetail(scope.row.id)"> </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="insp-page">
        <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="currentPage"
                :hide-on-single-page="false"
                @current-change="handlePageChange"
                :page-size="pageSize"
                :total="recordsTotal"
        >
        </el-pagination>
      </div>
    </div>

    <!--养护记录详情-->
    <vx-popup :title="detailTitle" width="880px" @close="cancelDetail" :active.sync="detailVisible" @confirmPopup="cancelDetail" @cancelPopup="cancelDetail">
      <div class="insp-popup-detail">
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>养护单 : </label>
            <span>{{ detailInfo['taskName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>养护类型 : </label>
            <span>{{ detailInfo['taskTypeStr'] || '' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>桥梁名称 : </label>
            <span>{{ detailInfo['bridgeName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>病害名称 : </label>
            <span>{{ detailInfo['diseaseName'] || '' }}</span>
          </el-col>
        </el-row>
        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>病害位置 : </label>
            <span>{{ detailInfo['diseaseLocation'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>缺损记录 : </label>
            <span>{{ detailInfo['defectRecord'] || '' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>养护人员: </label>
            <span>{{ detailInfo['feedbackName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>养护时间: </label>
            <span>{{ detailInfo['feedbackTime'] || '' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>巡检人员: </label>
            <span>{{ detailInfo['inspectionName'] || '' }}</span>
          </el-col>
          <el-col :span="12">
            <label>养护级别: </label>
            <span>{{ detailInfo['level'] ? (detailInfo['level'] === 2 ? '三级' : '二级') : '一级' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="12">
            <label>处理记录: </label>
            <span>{{ detailInfo['status'] ? statusText(detailInfo['status']) : '初报未处理' }}</span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>养护图片 : </label>
            <span class="imageList">
              <el-image
                      style="width: 70px; height: 70px; margin-right: 5px"
                      v-for="(item, index) in computedImageList"
                      :key="`${index}image`"
                      :src="item"
                      :preview-src-list="computedImageList"
              ></el-image>
            </span>
          </el-col>
        </el-row>

        <el-row justify="space-between" :gutter="20">
          <el-col :span="24">
            <label>养护反馈 : </label>
            <span class="over" :title="detailInfo['feedbackDescribe'] || ''">{{ detailInfo['feedbackDescribe'] || '' }}</span>
          </el-col>
        </el-row>
      </div>
    </vx-popup>
  </div>
</template>
<script>
  import axios from '@/http/axios'
  import base from '@/api/base'
  export default {
    data() {
      return {
        tableData:[{
          taskName: 'BJDQ20210426001养护记录',
          diseaseName: '网裂或龟裂',
          bridgeName: '滨江大桥',
          diseaseLocationStr: '桥面系',
          defectRecord: 'cm',
          feedbackDescribe: '有安全隐患，请及时修复',
        },{
          taskName: 'CZDQ20210427002养护记录',
          diseaseName: '破损',
          bridgeName: '城闸大桥',
          diseaseLocationStr: '桥面系',
          defectRecord: 'cm²',
          feedbackDescribe: '请及时修复',
        },{
          taskName: 'BJDQ20210428003养护记录',
          diseaseName: '网裂或龟裂',
          bridgeName: '滨江大桥',
          diseaseLocationStr: '桥面系',
          defectRecord: 'cm',
          feedbackDescribe: '有安全隐患，请及时修复',
        }],
        detailTitle: '养护记录详情',
        detailVisible: false,
        diseaseName: '',
        pageSize: 14,
        currentPage: 1,
        recordsTotal: 0,
       /* tableData: [],*/
        multipleSelection: [],
        detailInfo: {},
      }
    },
    created() {
      this.queryForPage()
    },
    methods: {
      queryForPage(pageIndex) {
        if (pageIndex && pageIndex === 1) {
          this.currentPage = 1
        }
        const _params = {
          pageSize: this.pageSize,
          pageNum: this.currentPage,
          diseaseName: this.diseaseName,
        }
      /*  this.$api.curing.queryRecordsPage(_params).then((response) => {
          if (response.data.success) {
            if (response.data.data && response.data.data.length > 0) {
              this.tableData = response.data.data.map((item, index) => ({
                id: item.id,
                taskName: item.diseaseVO ? item.diseaseVO['taskName'] : '',
                diseaseName: item.diseaseName,
                bridgeName: item.diseaseVO ? item.diseaseVO['bridgeName'] : '',
                diseaseLocationStr: item.diseaseVO ? item.diseaseVO['diseaseLocationStr'] : '',
                defectRecord: item.defectRecord,
                feedbackDescribe: item.feedbackDescribe,
                state: item.diseaseVO ? item.diseaseVO['state'] : null,
              }))
            } else {
              this.tableData = []
            }
            this.recordsTotal = response.data.recordsTotal
          }
        })*/
      },
      handlePageChange(currentPage) {
        this.currentPage = currentPage
        this.queryForPage()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleDownLoad() {
        let ids = this.multipleSelection.map((item) => item.id)
        if (ids.length > 0) {
          let _ids = ids.join(',')
          let a = document.createElement('a')
          a.href = `${base.curingUrl}/maintenance/bridge/download?id=${_ids}`
          document.body.appendChild(a)
          a.click()
          URL.revokeObjectURL(a.href)
          document.body.removeChild(a)
        } else {
          this.$vs.notify({
            text: '请选择养护单！',
            color: 'primary',
          })
        }
      },
      queryRecordById(id) {
        this.$api.curing
                .queryRecordById({
                  id,
                })
                .then((response) => {
                  if (response.data.success) {
                    if (response.data.data) {
                      this.detailInfo = response.data.data
                      console.log(this.detailInfo)
                    }
                  }
                })
      },
      handelDetail(val) {
        this.detailVisible = true
        this.queryRecordById(val)
      },
      cancelDetail() {
        this.detailVisible = false
      },
      statusClass(type) {
        switch (type) {
          case 0:
            return 'planStatus1'
          case 1:
            return 'planStatus1'
          case 2:
            return 'planStatus1'
          case 3:
            return 'planStatus1'
          case 4:
            return 'planStatus1'
          case 5:
            return 'planStatus1'
          case 6:
            return 'planStatus1'
          case 7:
            return 'planStatus1'
          case 8:
            return 'planStatus1'
          case 9:
            return 'planStatus1'
          case 10:
            return 'planStatus1'
          case 11:
            return 'planStatus1'
          case 12:
            return 'planStatus1'
          case 13:
            return 'planStatus1'
          case 14:
            return 'planStatus1'
          case 15:
            return 'planStatus1'
          case 98:
            return 'planStatus1'
          case 99:
            return 'planStatus99'
          default:
            return ''
        }
      },
      statusText(type) {
        switch (type) {
          case 0:
            return '创建设施损坏情况单'
          case 1:
            return '设施管理科安排任务中'
          case 2:
            return '设施待确认(巡视大队)'
          case 3:
            return '设施确认中(巡视大队)'
          case 4:
            return '设施待确认(设施科)'
          case 5:
            return '设施确认中(设施员)'
          case 6:
            return '设施确认完成(待派维修单)'
          case 7:
            return '维修单派单中'
          case 8:
            return '施工部门待接单'
          case 9:
            return '施工部门已接单'
          case 10:
            return '施工维修中'
          case 11:
            return '施工完成'
          case 12:
            return '维修结果待核查'
          case 13:
            return '维修结果核查中'
          case 14:
            return '维修结果待确认'
          case 15:
            return '维修结果确认中'
          case 98:
            return '待发'
          case 99:
            return '处理完成'
          default:
            return ''
        }
      },
    },
    computed: {
      computedImageList() {
        let _list = this.detailInfo['fileVOList'] ? this.detailInfo['fileVOList'] : []
        return _list.map((item) => `${base.DOWNLOADURL}${item.filePath}`)
      },
    },
  }
</script>
<style scoped lang="scss">
  @import '@/views/inspection/insp.scss';

  /deep/.el-table__header tr,
  /deep/.el-table__header th {
    padding: 0;
    height: 44px;
  }

  /deep/.el-table td,
  /deep/.el-table th {
    text-align: center;
    font-size: 14px;
  }

  /deep/.el-table th {
    font-weight: 500;
    color: #fff;
  }

  /deep/.el-table td {
    font-weight: 400;
    color: #444;
    padding: 0;
    height: 44px;
    line-height: 44px;
  }

  /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #f1f5fc;
  }

  .btn {
    margin-left: 20px;
  }
</style>

